<template>
    <div class="content">
        <!-- 轮播图 -->
        <div class="carousel" :style="{ backgroundImage: `url(${images[currentIndex].name}&blur=40x20)` }">
            <div class="wrap">
                <div class="img">
                    <el-carousel ref="carouselRef" height="285px" @change="carouselChange" arrow="never" motion-blur>
                        <el-carousel-item v-for="item in images" :key="item">
                            <img style="object-fit: cover; width: 100%; height: 100%;" :src="item.name" alt=""
                                srcset="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="download">
                    <img src="../assets/Home/Carousel/download.png" alt="" srcset="">
                </div>
                <div @click="prevCarousel" class="left"></div>
                <div @click="nextCarousel" class="right"></div>
            </div>
        </div>
        <!-- 主体 -->
        <div class="body">
            <div class="left">
                <div class="wrap">
                    <div class="content">
                        <!-- 热门推荐 -->
                        <div class="recommend">
                            <ComNav title="热门推荐" :keywords="['华语', '流行', '摇滚', '民谣', '电子']"
                                moreLink="/discover/playlist/" moreText="更多" />
                            <ComCardList :list="recommendList" :limit="8" />
                        </div>
                        <!-- 个性化推荐 -->
                        <div class="personality">
                            <ComNav title="个性化推荐" moreLink="/discover/playlist/" moreText="更多" />
                            <ComCardList :list="recommendList" :showFirstCard="true" :limit="3" />
                        </div>
                        <div class="gap"></div>
                        <!-- 新碟上架 -->
                        <div class="new">
                            <ComNav title="新碟上架" moreLink="/discover/playlist/" moreText="更多" />
                            <div class="disk">
                                <div class="content">
                                    <div class="d-carousel">
                                        <el-carousel ref="diskCarousel" height="180px" :autoplay="false" arrow="never"
                                            indicator-position="none" motion-blur>
                                            <el-carousel-item v-for="item in images" :key="item">
                                                <ul class="roller">
                                                    <li>
                                                        <div class="cover">
                                                            <img class="img"
                                                                data-src="http://p1.music.126.net/UeU4pHy7r2zfIkiAiUkw-w==/109951170984127734.jpg?param=100y100"
                                                                src="http://p1.music.126.net/UeU4pHy7r2zfIkiAiUkw-w==/109951170984127734.jpg?param=100y100">
                                                            <span title="光明离不开黑暗" class="msk">
                                                            </span>
                                                            <span href="javascript:;" class="play" title="播放"></span>
                                                        </div>
                                                        <p class="thide">
                                                            <span title="光明离不开黑暗" class="text">光明离不开黑暗
                                                            </span>
                                                        </p>
                                                        <p class="tit" title="PSY.P">
                                                            <span class="text">PSY.P</span>
                                                        </p>
                                                    </li>
                                                    <li>
                                                        <div class="cover">
                                                            <img class="img"
                                                                data-src="http://p1.music.126.net/UeU4pHy7r2zfIkiAiUkw-w==/109951170984127734.jpg?param=100y100"
                                                                src="http://p1.music.126.net/UeU4pHy7r2zfIkiAiUkw-w==/109951170984127734.jpg?param=100y100">
                                                            <span title="光明离不开黑暗" class="msk">
                                                            </span>
                                                            <span href="javascript:;" class="play" title="播放"></span>
                                                        </div>
                                                        <p class="thide">
                                                            <span title="光明离不开黑暗" class="text">光明离不开黑暗
                                                            </span>
                                                        </p>
                                                        <p class="tit" title="PSY.P">
                                                            <span class="text">PSY.P</span>
                                                        </p>
                                                    </li>
                                                    <li>
                                                        <div class="cover">
                                                            <img class="img"
                                                                data-src="http://p1.music.126.net/UeU4pHy7r2zfIkiAiUkw-w==/109951170984127734.jpg?param=100y100"
                                                                src="http://p1.music.126.net/UeU4pHy7r2zfIkiAiUkw-w==/109951170984127734.jpg?param=100y100">
                                                            <span title="光明离不开黑暗" class="msk">
                                                            </span>
                                                            <span href="javascript:;" class="play" title="播放"></span>
                                                        </div>
                                                        <p class="thide">
                                                            <span title="光明离不开黑暗" class="text">光明离不开黑暗
                                                            </span>
                                                        </p>
                                                        <p class="tit" title="PSY.P">
                                                            <span class="text">PSY.P</span>
                                                        </p>
                                                    </li>
                                                    <li>
                                                        <div class="cover">
                                                            <img class="img"
                                                                data-src="http://p1.music.126.net/UeU4pHy7r2zfIkiAiUkw-w==/109951170984127734.jpg?param=100y100"
                                                                src="http://p1.music.126.net/UeU4pHy7r2zfIkiAiUkw-w==/109951170984127734.jpg?param=100y100">
                                                            <span title="光明离不开黑暗" class="msk">
                                                            </span>
                                                            <span href="javascript:;" class="play" title="播放"></span>
                                                        </div>
                                                        <p class="thide">
                                                            <span title="光明离不开黑暗" class="text">光明离不开黑暗
                                                            </span>
                                                        </p>
                                                        <p class="tit" title="PSY.P">
                                                            <span class="text">PSY.P</span>
                                                        </p>
                                                    </li>
                                                    <li>
                                                        <div class="cover">
                                                            <img class="img"
                                                                data-src="http://p1.music.126.net/UeU4pHy7r2zfIkiAiUkw-w==/109951170984127734.jpg?param=100y100"
                                                                src="http://p1.music.126.net/UeU4pHy7r2zfIkiAiUkw-w==/109951170984127734.jpg?param=100y100">
                                                            <span title="光明离不开黑暗" class="msk">
                                                            </span>
                                                            <span href="javascript:;" class="play" title="播放"></span>
                                                        </div>
                                                        <p class="thide">
                                                            <span title="光明离不开黑暗" class="text">111光明离不开黑暗
                                                            </span>
                                                        </p>
                                                        <p class="tit" title="PSY.P">
                                                            <span class="text">PSY.P</span>
                                                        </p>
                                                    </li>
                                                </ul>
                                            </el-carousel-item>
                                        </el-carousel>
                                    </div>
                                    <div @click="changePrev" class="leftBtn"></div>
                                    <div @click="changeNext" class="rightBtn"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 榜单 -->
                        <div class="bill">
                            <ComNav title="榜单" moreLink="/discover/playlist/" moreText="更多" />
                            <div class="blist">
                                <dl class="blk">
                                    <dt class="top">
                                        <div class="cover">
                                            <img class="img" src="../assets/Home/Recommend/r1.jpg">
                                            <span class="msk" title="飙升榜"></span>
                                        </div>
                                        <div class="tit">
                                            <span title="飙升榜">
                                                <h3 class="thide">飙升榜</h3>
                                            </span>
                                            <div class="btn">
                                                <span class="tdn" title="播放">播放</span>
                                                <span class="subscribe" title="收藏">收藏</span>
                                            </div>
                                        </div>
                                    </dt>
                                    <dd>
                                        <ol>
                                            <li class="">
                                                <span class="l-top no-top">1</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top no-top">2</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top no-top">3</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">4</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">5</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">6</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">7</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">8</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">9</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">10</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                        </ol>
                                        <div class="more">
                                            <span class="all">查看全部&gt;
                                            </span>
                                        </div>
                                    </dd>
                                </dl>
                                <dl class="blk">
                                    <dt class="top">
                                        <div class="cover">
                                            <img class="img" src="../assets/Home/Recommend/r2.jpg">
                                            <span class="msk" title="新歌榜"></span>
                                        </div>
                                        <div class="tit">
                                            <span title="新歌榜">
                                                <h3 class="thide">新歌榜</h3>
                                            </span>
                                            <div class="btn">
                                                <span class="tdn" title="播放">播放</span>
                                                <span class="subscribe" title="收藏">收藏</span>
                                            </div>
                                        </div>
                                    </dt>
                                    <dd>
                                        <ol>
                                            <li class="">
                                                <span class="l-top no-top">1</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top no-top">2</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top no-top">3</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">4</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">5</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">6</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">7</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">8</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">9</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">10</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                        </ol>
                                        <div class="more">
                                            <span class="all">查看全部&gt;
                                            </span>
                                        </div>
                                    </dd>
                                </dl>
                                <dl class="blk">
                                    <dt class="top">
                                        <div class="cover">
                                            <img class="img" src="../assets/Home/Recommend/r3.jpg">
                                            <span class="msk" title="原创榜"></span>
                                        </div>
                                        <div class="tit">
                                            <span title="原创榜">
                                                <h3 class="thide">原创榜</h3>
                                            </span>
                                            <div class="btn">
                                                <span class="tdn" title="播放">播放</span>
                                                <span class="subscribe" title="收藏">收藏</span>
                                            </div>
                                        </div>
                                    </dt>
                                    <dd>
                                        <ol>
                                            <li class="">
                                                <span class="l-top no-top">1</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top no-top">2</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top no-top">3</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">4</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">5</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">6</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">7</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">8</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">9</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                            <li class="">
                                                <span class="l-top">10</span>
                                                <span class="thide" title="炁 (live)">炁 (live)</span>
                                                <div class="oper">
                                                    <span class="play" title="播放"></span>
                                                    <span class="icn1" title="添加到播放列表"></span>
                                                    <span class="collection" title="收藏"></span>
                                                </div>
                                            </li>
                                        </ol>
                                        <div class="more">
                                            <span class="all">查看全部&gt;
                                            </span>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="dis_vip_card">
                    <img class="dis_vip_card_img" src="../assets/Home/Recommend/dis_vip_card.png">
                </div>
                <div class="n-user-profile">
                    <div class="myinfo">
                        <p class="note">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                        <span class="btn">用户登录</span>
                    </div>
                </div>
                <div class="n-singer">
                    <h3 class="v-hd3">
                        <span class="f-fl">入驻歌手</span>
                        <span class="more">查看全部 &gt;</span>
                    </h3>
                    <ul class="n-enter">
                        <li>
                            <span class="itm">
                                <div class="head">
                                    <img class="j-img"
                                        src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=62y62">
                                </div>
                                <div class="ifo">
                                    <h4><span class="thide">张惠妹aMEI</span></h4>
                                    <p class="f-thide">台湾歌手张惠妹</p>
                                </div>
                            </span>
                        </li>
                        <li>
                            <span class="itm">
                                <div class="head">
                                    <img class="j-img"
                                        src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=62y62">
                                </div>
                                <div class="ifo">
                                    <h4><span class="thide">张惠妹aMEI</span></h4>
                                    <p class="f-thide">台湾歌手张惠妹</p>
                                </div>
                            </span>
                        </li>
                        <li>
                            <span class="itm">
                                <div class="head">
                                    <img class="j-img"
                                        src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=62y62">
                                </div>
                                <div class="ifo">
                                    <h4><span class="thide">张惠妹aMEI</span></h4>
                                    <p class="f-thide">台湾歌手张惠妹</p>
                                </div>
                            </span>
                        </li>
                        <li>
                            <span class="itm">
                                <div class="head">
                                    <img class="j-img"
                                        src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=62y62">
                                </div>
                                <div class="ifo">
                                    <h4><span class="thide">张惠妹aMEI</span></h4>
                                    <p class="f-thide">台湾歌手张惠妹</p>
                                </div>
                            </span>
                        </li>
                        <li>
                            <span class="itm">
                                <div class="head">
                                    <img class="j-img"
                                        src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=62y62">
                                </div>
                                <div class="ifo">
                                    <h4><span class="thide">张惠妹aMEI</span></h4>
                                    <p class="f-thide">台湾歌手张惠妹</p>
                                </div>
                            </span>
                        </li>
                    </ul>
                    <div>
                        <span class="u-btn"><i>申请成为网易音乐人</i></span>
                    </div>
                </div>
                <div class="n-dj">
                    <h3 class="v-hd3">热门主播</h3>
                    <ul class="n-hotdj">
                        <li>
                            <span class="cver">
                                <img class="j-img"
                                    src="http://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40"
                                    data-src="http://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40">
                            </span>
                            <div class="info">
                                <p><span class="icn">陈立</span></p>
                                <p class="thide">心理学家、美食家陈立教授</p>
                            </div>
                        </li>
                        <li>
                            <span class="cver">
                                <img class="j-img"
                                    src="http://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40"
                                    data-src="http://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40">
                            </span>
                            <div class="info">
                                <p><span class="icn">陈立</span></p>
                                <p class="thide">心理学家、美食家陈立教授</p>
                            </div>
                        </li>
                        <li>
                            <span class="cver">
                                <img class="j-img"
                                    src="http://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40"
                                    data-src="http://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40">
                            </span>
                            <div class="info">
                                <p><span class="icn">陈立</span></p>
                                <p class="thide">心理学家、美食家陈立教授</p>
                            </div>
                        </li>
                        <li>
                            <span class="cver">
                                <img class="j-img"
                                    src="http://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40"
                                    data-src="http://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40">
                            </span>
                            <div class="info">
                                <p><span class="icn">陈立</span></p>
                                <p class="thide">心理学家、美食家陈立教授</p>
                            </div>
                        </li>
                        <li>
                            <span class="cver">
                                <img class="j-img"
                                    src="http://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40"
                                    data-src="http://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40">
                            </span>
                            <div class="info">
                                <p><span class="icn">陈立</span></p>
                                <p class="thide">心理学家、美食家陈立教授</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ComNav from '../components/ComNav.vue'
import ComCardList from '../components/ComCardList.vue'

const recommendList = [
    {
        id: 1,
        name: '古典清香 I 我的茶馆里住着巴赫与肖邦',
        picUrl: 'http://p2.music.126.net/QcPJfzds8ejF1FPgBaXMTw==/109951163128461676.jpg?param=140y140',
        playCount: 33680000,
        hasIcon: false
    },
    {
        id: 2,
        name: '宝藏挖掘机|分享好音乐和金曲',
        picUrl: 'http://p2.music.126.net/whuiVDHL3a-OE8q4mcj5xA==/109951169484809780.jpg?param=140y140',
        playCount: 99810000,
        hasIcon: false
    },
    {
        id: 3,
        name: '欧美万评优质女声•萦绕耳畔忆于心间',
        picUrl: 'http://p2.music.126.net/ptx2Jf4PZl3oNLxv4NiADg==/109951164018765577.jpg?param=140y140',
        playCount: 40330000,
        hasIcon: false
    },
    {
        id: 4,
        name: '好妹妹乐队聊18岁：听见人生的第一次迷茫',
        picUrl: 'http://p2.music.126.net/6ICIS6VJ64gk9nYptGRTIg==/109951170984015005.jpg?param=140y140',
        playCount: 15950,
        hasIcon: true
    },
    {
        id: 5,
        name: '戳爷/黄老板/断眉/萌德/骚姆/比伯/烟卷',
        picUrl: 'http://p2.music.126.net/sOWvFHC7alSUXHxmsTr1bQ==/109951163610820733.jpg?param=140y140',
        playCount: 45790000,
        hasIcon: false
    },
    {
        id: 6,
        name: '不是惩罚，而是【看见】：我儿子让我在霸凌这堂课中恍然大悟',
        picUrl: 'http://p2.music.126.net/LUyh3T4skewjTYUab8k24Q==/109951170980235468.jpg?param=140y140',
        playCount: 1577,
        hasIcon: true
    },
    {
        id: 7,
        name: '助眠辑 | 自然音，伴灵动乐符萦绕耳畔',
        picUrl: 'http://p2.music.126.net/sixunTcvD_IXeVqxZnpHkA==/109951163452086313.jpg?param=140y140',
        playCount: 30200000,
        hasIcon: true
    },
    {
        id: 8,
        name: '唯一 (抖音DJ热播版)',
        picUrl: 'http://p1.music.126.net/EGrmZoSgGXAsMKq0Wwbhlg==/109951170614898959.jpg?param=140y140',
        playCount: 730000,
        hasIcon: true
    }
];


const images = [
    { name: 'https://p1.music.126.net/j2RNq1gRdpRTYVGGt6PVMw==/109951170988249226.jpg?imageView&quality=89' },
    { name: 'https://p1.music.126.net/mv7tXr32R3p0O6RqgMTEng==/109951170988261894.jpg?imageView&quality=89' },
    { name: 'https://p1.music.126.net/xgtUQyddol1sNcQ67MtPZg==/109951170988328336.jpg?imageView&quality=89' },
    { name: 'https://p1.music.126.net/oklUa7LfbHse01JOalCo6A==/109951170988385593.jpg?imageView&quality=89' },
    { name: 'https://p1.music.126.net/sVlAHkbLz8oIN1cGVEC6BA==/109951170988317388.jpg?imageView&quality=89' },
    { name: 'https://p1.music.126.net/nxGBuFcAXyCJixhJQ6yK-w==/109951170989966094.jpg?imageView&quality=89' },
    { name: 'https://p1.music.126.net/GnurAbFLblT6tAc2Glw8Qg==/109951171005180822.jpg?imageView&quality=89' },
]

// 获取顶部轮播图实例对象
const carouselRef = ref()
const prevCarousel = () => {
    carouselRef.value?.prev()
}

const nextCarousel = () => {
    carouselRef.value?.next()
}

// 获取碟片轮播图实例对象
const diskCarousel = ref()
const changePrev = () => {
    diskCarousel.value?.prev()
}

const changeNext = () => {
    diskCarousel.value?.next()
}

// 获取轮播图当前索引
const currentIndex = ref(0)
const carouselChange = (current: number) => {
    currentIndex.value = current
}

</script>

<style lang="scss" scoped>
.content {

    // 轮播图
    .carousel {
        width: 100%;
        height: 285px;
        background-image: url('/src/assets/Home/Carousel/bg2.jpg');
        background-position: center center;
        background-size: 6000px;

        .wrap {
            position: relative;
            width: 982px;
            height: 285px;
            margin: 0 auto;
            display: flex;

            .img {
                width: 730px;
            }

            .download {
                width: 252px;
                overflow: hidden;
            }

            .left {
                position: absolute;
                top: 50%;
                margin-top: -31px;
                width: 37px;
                height: 63px;
                text-indent: -9999px;
                left: -68px;
                background-position: 0 -360px !important;
                background: url(../assets/Home/Carousel/banner.png) no-repeat;
                cursor: pointer;

                &:hover {
                    background-position: 0 -430px !important;
                }
            }

            .right {
                position: absolute;
                top: 50%;
                margin-top: -31px;
                width: 37px;
                height: 63px;
                text-indent: -9999px;
                right: -68px;
                background-position: 0 -508px !important;
                background: url(../assets/Home/Carousel/banner.png) no-repeat;
                cursor: pointer;

                &:hover {
                    background-position: 0 -578px !important;
                }
            }
        }
    }

    .body {
        width: 980px;
        // min-height: 1750px;
        min-height: 1450px;
        margin: 0 auto;
        background-color: #fff;
        border: 1px solid #d3d3d3;
        border-width: 0 1px;
        background: url(../assets/Home/Recommend/wrap1.png) repeat-y 100% 100%;
        overflow: hidden; // 添加这一行

        .left {
            float: left;
            width: 100%;
            margin-right: -250px;

            .wrap {
                margin-right: 251px;

                .content {
                    padding: 20px 20px 40px;

                    .recommend {

                        .nav {
                            height: 33px;
                            padding: 0 10px 0 34px;
                            background-position: -225px -156px !important;
                            border-bottom: 2px solid #C10D0C;
                            background: url(../assets/Home/Recommend/index.png) no-repeat;
                            display: flex;

                            .hot {
                                font-size: 20px;
                                font-weight: normal;
                                line-height: 28px;
                                cursor: pointer;
                            }

                            .tab {
                                margin: 7px 0 0 20px;

                                .link {
                                    color: #666;
                                    cursor: pointer;

                                    &:hover {
                                        text-decoration: underline;
                                    }
                                }

                                .line {
                                    margin: 0 10px;
                                    color: #ccc;
                                }
                            }

                            .more {
                                color: #666;
                                margin-left: auto;
                                margin-top: 9px;

                                a {
                                    &:hover {
                                        text-decoration: underline;
                                    }
                                }

                                i {
                                    display: inline-block;
                                    width: 12px;
                                    height: 12px;
                                    margin-left: 4px;
                                    vertical-align: middle;
                                    background-position: 0 -240px !important;
                                    background: url(../assets/Home/Recommend/index.png) no-repeat;
                                }
                            }
                        }

                        .list {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 20px; // 控制每个卡片之间的间距
                            margin-top: 20px;
                            padding-left: 10px; // 避免太靠左

                            li {
                                width: 140px;
                                height: 204px;
                                line-height: 1.4;
                                margin: 5px 7px;

                                .cover {
                                    width: 140px;
                                    height: 140px;
                                    position: relative;
                                    display: block;
                                    cursor: pointer;

                                    img {
                                        display: block;
                                        width: 100%;
                                        height: 100%;
                                    }

                                    .msk {
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        width: 100%;
                                        height: 100%;
                                        background-position: 0 0;
                                        background: url(../assets/Home/Recommend/coverall.png) no-repeat;
                                    }

                                    .bottom {
                                        position: absolute;
                                        bottom: 0;
                                        left: 0;
                                        width: 100%;
                                        height: 27px;
                                        background-position: 0 -537px !important;
                                        color: #ccc;
                                        background: url(../assets/Home/Recommend/coverall.png) no-repeat;
                                        display: flex;
                                        align-items: center;

                                        .play {
                                            position: absolute;
                                            right: 10px;
                                            bottom: 5px;
                                            width: 16px;
                                            height: 17px;
                                            background-position: 0 0;
                                            background: url(../assets/Home/Recommend/iconall.png) no-repeat;

                                            &:hover {
                                                background-position: 0 -60px !important;
                                            }
                                        }

                                        .headset {
                                            width: 14px;
                                            height: 11px;
                                            background-position: 0 -24px !important;
                                            margin: 9px 5px 9px 10px;
                                            background: url(../assets/Home/Recommend/iconall.png) no-repeat;
                                        }

                                        .nb {
                                            margin: 3px 0 0 0;
                                        }
                                    }
                                }

                                .dec {
                                    margin: 8px 0 3px;
                                    font-size: 14px;
                                    width: 100%;

                                    .tit {
                                        display: inline-block;
                                        max-width: 100%;
                                        vertical-align: middle;
                                        cursor: pointer;

                                        .icon {
                                            position: relative;
                                            top: -1px;
                                            margin-right: 3px;
                                            vertical-align: middle;
                                            margin-top: -1px;
                                            width: 35px;
                                            height: 15px;
                                            display: inline-block;
                                            overflow: hidden;
                                            background-position: -31px -658px !important;
                                            background: url(../assets/Home/Recommend/icon.png) no-repeat;
                                        }

                                        &:hover {
                                            text-decoration: underline;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .personality {
                        margin-top: 50px;
                    }

                    .gap {
                        position: relative;
                        margin: 0 0 65px;
                    }

                    .new {
                        margin: 0px 0 0px;

                        .disk {
                            position: relative;
                            zoom: 1;
                            height: 186px;
                            margin: 20px 0 37px;
                            border: 1px solid #d3d3d3;

                            .content {
                                height: 184px;
                                padding-left: 16px;
                                background: #f5f5f5;
                                border: 1px solid #fff;

                                .d-carousel {
                                    width: 645px;
                                    height: 180px;
                                    overflow: hidden;

                                    .roller {
                                        // position: absolute;
                                        // top: 0;
                                        display: flex;
                                        align-items: center;
                                        width: 645px;
                                        margin-top: 5px;

                                        li {
                                            display: inline;
                                            width: 118px;
                                            height: 150px;
                                            margin-left: 11px;
                                            background-position: -260px 100px !important;
                                            background: url(../assets/Home/Recommend/index.png) no-repeat;

                                            .cover {
                                                margin-bottom: 7px;
                                                width: 100px;
                                                height: 100px;
                                                position: relative;
                                                display: block;

                                                img {
                                                    display: block;
                                                    width: 100%;
                                                    height: 100%;
                                                }

                                                .msk {
                                                    position: absolute;
                                                    top: 0;
                                                    left: 0;
                                                    width: 118px;
                                                    height: 100px;
                                                    background-position: 0 -570px !important;
                                                    background: url(../assets/Home/Recommend/coverall.png) no-repeat;
                                                    cursor: pointer;
                                                }

                                                .play {
                                                    position: absolute;
                                                    right: 10px;
                                                    bottom: 5px;
                                                    display: none;
                                                    left: 72px;
                                                    width: 22px;
                                                    height: 22px;
                                                    background-position: 0 -85px !important;
                                                    background: url(../assets/Home/Recommend/iconall.png) no-repeat;

                                                    &:hover {
                                                        background-position: 0 -110px !important;
                                                    }
                                                }

                                                &:hover .play {
                                                    display: block;
                                                }
                                            }

                                            .thide {
                                                width: 90%;
                                                line-height: 18px;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                                white-space: nowrap;
                                                word-wrap: normal;

                                                .text {
                                                    color: #000;
                                                    cursor: pointer;

                                                    &:hover {
                                                        text-decoration: underline;
                                                    }
                                                }
                                            }

                                            .tit {
                                                width: 90%;
                                                line-height: 18px;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                                white-space: nowrap;
                                                word-wrap: normal;

                                                .text {
                                                    color: #666;
                                                    cursor: pointer;

                                                    &:hover {
                                                        text-decoration: underline;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }

                                .leftBtn {
                                    position: absolute;
                                    top: 71px;
                                    width: 17px;
                                    height: 17px;
                                    left: 4px;
                                    background-position: -260px -75px !important;
                                    background: url(../assets/Home/Recommend/index.png) no-repeat;

                                    &:hover {
                                        background-position: -280px -75px !important;
                                    }
                                }

                                .rightBtn {
                                    position: absolute;
                                    top: 71px;
                                    right: 4px;
                                    width: 17px;
                                    height: 17px;
                                    background-position: -300px -75px !important;
                                    background: url(../assets/Home/Recommend/index.png) no-repeat;

                                    &:hover {
                                        background-position: -320px -75px !important;
                                    }
                                }
                            }
                        }
                    }

                    .bill {

                        .blist {
                            height: 472px;
                            margin-top: 20px;
                            padding-left: 1px;
                            background: url(../assets/Home/Recommend/index_bill.png) no-repeat;
                            display: flex;

                            .blk {
                                // float: left;
                                width: 230px;

                                .top {
                                    height: 100px;
                                    padding: 20px 0 0 19px;
                                    display: flex;
                                    box-sizing: content-box;

                                    .cover {
                                        display: inline;
                                        width: 80px;
                                        height: 80px;
                                        position: relative;

                                        .img {
                                            display: block;
                                            width: 100%;
                                            height: 100%;
                                            overflow-clip-margin: content-box;
                                            overflow: clip;
                                        }

                                        .msk {
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            width: 100%;
                                            height: 100%;
                                            background-position: -145px -57px !important;
                                            background: url(../assets/Home/Recommend/coverall.png) no-repeat;
                                        }
                                    }

                                    .tit {
                                        width: 116px;
                                        margin: 6px 0 0 10px;

                                        .thide {
                                            color: #333;
                                            cursor: pointer;
                                        }

                                        .btn {
                                            margin-top: 10px;
                                            display: flex;

                                            .tdn {
                                                display: block;
                                                width: 22px;
                                                height: 22px;
                                                margin-right: 10px;
                                                text-indent: -9999px;
                                                background-position: -267px -205px !important;
                                                background: url(../assets/Home/Recommend/index.png) no-repeat;
                                                cursor: pointer;

                                                &:hover {
                                                    background-position: -267px -235px !important;
                                                }
                                            }

                                            .subscribe {
                                                display: block;
                                                width: 22px;
                                                height: 22px;
                                                margin-right: 10px;
                                                text-indent: -9999px;
                                                background-position: -300px -205px !important;
                                                background: url(../assets/Home/Recommend/index.png) no-repeat;
                                                cursor: pointer;

                                                &:hover {
                                                    background-position: -300px -235px !important;
                                                }
                                            }
                                        }
                                    }
                                }

                                ol {
                                    height: 319px;
                                    margin-left: 50px;
                                    line-height: 32px;

                                    li {
                                        height: 32px;
                                        display: flex;
                                        align-items: center;
                                        vertical-align: middle;

                                        .no-top {
                                            color: #c10d0c !important;
                                        }

                                        .l-top {
                                            position: relative;
                                            width: 35px;
                                            height: 32px;
                                            margin-left: -35px;
                                            text-align: center;
                                            color: #666;
                                            font-size: 16px;
                                        }

                                        .thide {
                                            width: 170px;
                                            height: 32px;
                                            color: #000;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            word-wrap: normal;
                                            cursor: pointer;

                                            &:hover {
                                                text-decoration: underline;
                                            }
                                        }

                                        .oper {
                                            display: none;
                                            // display: flex;
                                            width: 82px;
                                            margin-top: 7px;

                                            .play {
                                                width: 17px;
                                                height: 17px;
                                                margin-right: 10px;
                                                background-position: -267px -268px !important;
                                                background: url(../assets/Home/Recommend/index.png) no-repeat;
                                                cursor: pointer;

                                                &:hover {
                                                    background-position: -267px -288px !important;
                                                }
                                            }

                                            .icn1 {
                                                display: inline-block;
                                                overflow: hidden;
                                                margin: 2px 6px 0 0;
                                                width: 17px;
                                                height: 17px;
                                                background-position: 0 -700px !important;
                                                background: url(../assets/Home/Recommend/icon.png) no-repeat;
                                                cursor: pointer;

                                                &:hover {
                                                    background-position: -22px -700px !important;
                                                }
                                            }

                                            .collection {
                                                width: 17px;
                                                height: 17px;
                                                margin-right: 10px;
                                                background-position: -297px -268px !important;
                                                background: url(../assets/Home/Recommend/index.png) no-repeat;
                                                cursor: pointer;

                                                &:hover {
                                                    background-position: -297px -288px !important;
                                                }
                                            }
                                        }

                                        &:hover .oper {
                                            display: flex;
                                        }
                                    }
                                }

                                .more {
                                    clear: both;
                                    height: 32px;
                                    margin-right: 32px;
                                    text-align: right;
                                    line-height: 32px;

                                    .all {
                                        color: #000;
                                        cursor: pointer;

                                        &:hover {
                                            text-decoration: underline;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .right {
            position: relative;
            float: right;
            width: 250px;
            zoom: 1;

            .dis_vip_card {
                margin-top: 5px;

                .dis_vip_card_img {
                    width: 100%;
                    height: 100%;
                    overflow-clip-margin: content-box;
                    overflow: clip;
                    cursor: pointer;
                }
            }

            .n-user-profile {

                .myinfo {
                    height: 126px;
                    padding-top: 0;
                    background-position: 0 0;
                    background: url(../assets/Home/Recommend/index.png) no-repeat;

                    .note {
                        width: 205px;
                        margin: 0 auto;
                        padding: 16px 0;
                        line-height: 22px;
                        color: #666;
                    }

                    .btn {
                        display: block;
                        width: 100px;
                        height: 31px;
                        line-height: 31px;
                        text-align: center;
                        color: #fff;
                        text-shadow: 0 1px 0 #8a060b;
                        margin: 0 auto;
                        background-position: 0 -195px !important;
                        background: url(../assets/Home/Recommend/index.png) no-repeat;

                        &:hover {
                            background-position: -110px -195px !important;
                        }
                    }
                }
            }

            .n-singer {
                margin-top: 15px;

                .v-hd3 {
                    position: relative;
                    height: 23px;
                    margin: 0 20px;
                    border-bottom: 1px solid #ccc;
                    color: #333;

                    .f-fl {
                        float: left;
                        font-size: 12px;
                    }

                    .more {
                        font-size: 12px;
                        float: right;
                        font-weight: normal;
                        color: #666;
                        cursor: pointer;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }

                .n-enter {
                    height: 380px;
                    margin: 6px 0 14px 20px;

                    li {
                        margin-top: 14px;
                        float: left;
                        width: 210px;
                        height: 62px;
                        background: #fafafa;

                        .itm {
                            float: left;
                            width: 210px;
                            height: 62px;
                            background: #fafafa;
                            color: #333;
                            cursor: pointer;

                            .head {
                                float: left;
                                width: 62px;
                                height: 62px;
                                cursor: pointer;

                                .j-img {
                                    float: left;
                                    width: 62px;
                                    height: 62px;
                                }
                            }

                            .ifo {
                                box-sizing: content-box;
                                float: left;
                                width: 133px;
                                height: 60px;
                                padding-left: 14px;
                                border: 1px solid #e9e9e9;
                                border-left: none;
                                cursor: pointer;

                                .thide {
                                    width: 90%;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    word-wrap: normal;
                                    display: inline-block;
                                    font-size: 14px;
                                }

                                .f-thide {
                                    margin-top: 8px;
                                    width: 90%;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    word-wrap: normal;
                                    color: #666;
                                }
                            }
                        }
                    }
                }

                .u-btn {
                    margin-left: 20px;
                    border-radius: 4px;
                    color: #333;
                    background-position: right -100px !important;
                    display: inline-block;
                    height: 31px;
                    line-height: 31px;
                    overflow: hidden;
                    vertical-align: top;
                    text-align: center;
                    cursor: pointer;
                    padding: 0 5px 0 0;
                    white-space: nowrap;
                    background: url(../assets/Home/Recommend/button2.png) no-repeat;

                    &:hover i {
                        // color: #333;
                        // background-position: right -182px !important;
                        color: #333;
                        background-position: 0 -141px !important;
                    }

                    i {
                        box-sizing: content-box;
                        width: 170px;
                        font-weight: bold;
                        color: #333;
                        background-position: 0 -59px !important;
                        padding: 0 15px 0 20px;
                        pointer-events: none;
                        display: inline-block;
                        height: 31px;
                        line-height: 31px;
                        overflow: hidden;
                        vertical-align: top;
                        text-align: center;
                        font-style: normal;
                        font-size: inherit;
                        cursor: pointer;
                        background: url(../assets/Home/Recommend/button2.png) no-repeat;
                    }
                }
            }

            .n-dj {
                margin-top: 30px;

                .v-hd3 {
                    position: relative;
                    height: 23px;
                    margin: 0 20px;
                    border-bottom: 1px solid #ccc;
                    color: #333;
                }

                .n-hotdj {
                    margin: 20px 0 0 20px;

                    li {
                        float: left;
                        width: 210px;
                        height: 50px;

                        .cver {
                            float: left;
                            width: 40px;
                            margin-right: 10px;
                            cursor: pointer;

                            .j-img {
                                width: 40px;
                                height: 40px;
                                box-shadow: 0 0 1px #333333 inset;
                            }
                        }

                        .info {
                            float: left;
                            width: 160px;
                            line-height: 21px;

                            p {
                                width: 100%;
                            }

                            .icn {
                                display: inline-block;
                                zoom: 1;
                                max-width: 88%;
                                vertical-align: middle;
                                color: #000;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                word-wrap: normal;
                                cursor: pointer;
                            }

                            .thide {
                                color: #666;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                word-wrap: normal;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
